// 引用内置的path模块
const path = require("path");

// 使用CommonJS规范书写
module.exports = {
  // 编写入口
  entry : "./src/main.js",
  // 编写出口, output 是一个对象, 对象包含两个属性, path 路径 和fliename 文件名, 其中path路径必须是绝对路径
  // path绝对路径, 借助了node中的内置模块 path 的resolve方法
  output : {
    path : path.resolve(__dirname,"dist"),
    filename : "bundle.js", // 填写需要保存为的文件名
    // 设置publicPath, 让导出的每一个url地址在开头都添加上一个前缀地址
    publicPath: "dist/"
  },
  // 引入css文件需要局部安装 css-loader 和 style-loader
  module: {
    rules: [
    {
        test: /\.css$/,
        // 这里注意了, webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。
        // 所以是先执行css-loader 再执行 style-loader 顺序不能写错
        use: [ 'style-loader', 'css-loader' ]
    },
    {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "less-loader" // compiles Less to CSS
        }]
    },
    {
      test: /\.(png|jpg|gif|jpeg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            // 设置limit 限制图片的大小, 单位是B, 一般设置位8Kb, 
            limit: 16000,
            // 设置name属性, 来设置导出的图片名字
            name : "img/[name].[hash:8].[ext]"
          }
        }
      ]
    },
    {
      // 这句是匹配所有.js结尾的文件
      test: /\.js$/,
      // 这句是表示除了 node_modules|bower_components 文件夹内的文件
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          // 这里是转换位 ES5代码 的意思
          presets: ['es2015']
        }
      }
    },
    {
      test : /\.vue$/,
      use : ['vue-loader']
    }
    ]
  },
  resolve: {
    // 这里补充一下引入文件的缩写问题
    // 在webpack.config.js中resolve中编写代码
    // extensions : [".js", ".vue", ".css"], // 在这个数组中填写想要省略的文件的后缀
    alias: {
      'vue$': 'vue/dist/vue.esm.js' 
    },
  }
}